<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <meta name="generator" content="AsciiDoc 8.2.5" />
    <link rel="stylesheet" href="xhtml11.css" type="text/css" />
    <link rel="icon" href="chrome://vimperator/skin/icon.png" type="image/png" />
    <script type="application/x-javascript;version=1.8" src="help.js"></script>
    <title>styling.html</title>
  </head>
<body>
<h1 style="font-size: inherit; text-align: right;">
  <span class="tag" style="float: none;">styling.html</span>
</h1>
<div class="para"><p><div style="float: right; padding-left: 1px;"> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <fieldset class="paypal"> <input type="hidden" name="cmd" value="_s-xclick"/> <input type="image" src="" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"/> <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----"/> </fieldset> </form> </div> <span class="vimperator-logo"></span></p></div>
<div class="para"><p><span class="tag">styling</span><br /></p></div>
<div class="para"><p>Vimperator allows you to style both the browser and any web pages you view. All
styling is specified via CSS. Although you may style any user interface element
via the <a class="command" href="">:style</a> command, most Vimperator elements can be styled with the
<a class="command" href="">:highlight</a> command, for convenience.</p></div>
<div class="para"><p><span class="tag">E185</span> <span class="tag">:colo</span> <span class="tag">:colorscheme</span><br />
<div class="key">:colo[rscheme] <span class="argument">&#123;name&#125;</span></div><br /></p></div>
<div class="quoteblock">
<div class="content">
<div class="para"><p>Load a color scheme. <span class="argument">&#123;name&#125;</span> is found by searching the <a class="option" href="#">'runtimepath'</a> for the
first file matching colors/<span class="argument">&#123;name&#125;</span>.vimp.</p></div>
<div class="para"><p>The ColorScheme autocommand is triggered after the color scheme has been
sourced.</p></div>
<div class="attribution">
</div></div></div>
<div class="para"><p><span class="tag">:hi</span> <span class="tag">:highlight</span><br />
<div class="key">:hi[ghlight]<span class="argument">&#91;!&#93;</span> [-append] <span class="argument">&#123;group&#125;</span>[<span class="argument">&#123;selector&#125;</span>] [<span class="argument">&#123;css&#125;</span>]</div><br /></p></div>
<div class="quoteblock">
<div class="content">
<div class="para"><p>Highlight <span class="argument">&#123;group&#125;</span> with <span class="argument">&#123;css&#125;</span>. Normally, <span class="argument">&#123;css&#125;</span> is checked for
valid syntax before it's applied. Once you're certain it's
valid, <span class="argument">&#91;!&#93;</span> will override the check, to speed Vimperator startup.
<span class="argument">&#123;selector&#125;</span> can be any valid CSS selector, such as <a class="command" href="#">:hover</a>, and
if provided will restrict the match to matching elements.</p></div>
<div class="para"><p>Valid groups are:</p></div>
<div class="tableblock">
<table rules="none"
frame="hsides"
cellspacing="0" cellpadding="4">
<col width="240" />
<col width="411" />
<tbody valign="top">
  <tr>
    <td align="left">
    <strong>Bell</strong>
    </td>
    <td align="left">
    Vimperator's visual bell
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Boolean</strong>
    </td>
    <td align="left">
    A JavaScript Boolean object
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CmdLine</strong>
    </td>
    <td align="left">
    The command line
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CmdOutput</strong>
    </td>
    <td align="left">
    
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CompDesc</strong>
    </td>
    <td align="left">
    The description column of the completion list
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CompGroup</strong>
    </td>
    <td align="left">
    
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CompIcon</strong>
    </td>
    <td align="left">
    The favicon of a completion row
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CompItem</strong>
    </td>
    <td align="left">
    A row of completion list
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CompItem[selected]</strong>
    </td>
    <td align="left">
    A selected row of completion list
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CompLess</strong>
    </td>
    <td align="left">
    The indicator shown when completions may be scrolled up
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CompLess::after</strong>
    </td>
    <td align="left">
    The character of indicator shown when completions may be scrolled up
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CompMore</strong>
    </td>
    <td align="left">
    The indicator shown when completions may be scrolled down
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CompMore::after</strong>
    </td>
    <td align="left">
    The character of indicator shown when completions may be scrolled down
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CompMsg</strong>
    </td>
    <td align="left">
    
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CompResult</strong>
    </td>
    <td align="left">
    The result column of the completion list
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>CompTitle</strong>
    </td>
    <td align="left">
    Completion row titles
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>ErrorMsg</strong>
    </td>
    <td align="left">
    Error messages
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Filter</strong>
    </td>
    <td align="left">
    The matching text in a completion list
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>FrameIndicator</strong>
    </td>
    <td align="left">
    The indicator shown when a new frame is selected
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Function</strong>
    </td>
    <td align="left">
    A JavaScript Function object
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Gradient</strong>
    </td>
    <td align="left">
    
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>GradientLeft</strong>
    </td>
    <td align="left">
    
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>GradientRight</strong>
    </td>
    <td align="left">
    
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Hint</strong>
    </td>
    <td align="left">
    A hint indicator. See <a class="command" href="#">:help hints</a>
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>HintActive</strong>
    </td>
    <td align="left">
    The hint element of link which will be followed by &lt;Enter&gt;
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>HintElem</strong>
    </td>
    <td align="left">
    The hintable element
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>HintImage</strong>
    </td>
    <td align="left">
    The indicator which floats above hinted images
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Indicator</strong>
    </td>
    <td align="left">
    
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>InfoMsg</strong>
    </td>
    <td align="left">
    Information messages
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Keyword</strong>
    </td>
    <td align="left">
    A bookmark keyword for a URL
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>LineNr</strong>
    </td>
    <td align="left">
    The line number of an error
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Message</strong>
    </td>
    <td align="left">
    
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>ModeMsg</strong>
    </td>
    <td align="left">
    The mode indicator in the command line
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>MoreMsg</strong>
    </td>
    <td align="left">
    The indicator that there is more text to view
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>NonText</strong>
    </td>
    <td align="left">
    
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Normal</strong>
    </td>
    <td align="left">
    Normal text in the command line
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Null</strong>
    </td>
    <td align="left">
    A JavaScript Null object
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Number</strong>
    </td>
    <td align="left">
    A JavaScript Number object
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Object</strong>
    </td>
    <td align="left">
    A JavaScript Object
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Preview</strong>
    </td>
    <td align="left">
    
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Question</strong>
    </td>
    <td align="left">
    A prompt for a decision
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Search</strong>
    </td>
    <td align="left">
    Highlighted search results in a web page
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>StatusLine</strong>
    </td>
    <td align="left">
    The status bar
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>StatusLineBroken</strong>
    </td>
    <td align="left">
    The status bar for a broken web page
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>StatusLineSecure</strong>
    </td>
    <td align="left">
    The status bar for a secure web page
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>String</strong>
    </td>
    <td align="left">
    A JavaScript String object
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>TabClose</strong>
    </td>
    <td align="left">
    The close button of a browser tab
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>TabIcon</strong>
    </td>
    <td align="left">
    The icon of a browser tab
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>TabIconNumber</strong>
    </td>
    <td align="left">
    The number of a browser tab, over its icon
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>TabNumber</strong>
    </td>
    <td align="left">
    The number of a browser tab, next to its icon
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>TabText</strong>
    </td>
    <td align="left">
    The text of a browser tab
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Tag</strong>
    </td>
    <td align="left">
    A bookmark tag for a URL
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>Title</strong>
    </td>
    <td align="left">
    The title of a listing, including <a class="command" href="">:pageinfo</a>, <a class="command" href="">:jumps</a>
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>URL</strong>
    </td>
    <td align="left">
    A URL
    </td>
  </tr>
  <tr>
    <td align="left">
    <strong>WarningMsg</strong>
    </td>
    <td align="left">
    A warning message
    </td>
  </tr>
</tbody>
</table>
</div>
<div class="para"><p>Every invocation completely replaces the styling of any previous invocation,
unless <strong>-append</strong> (short option: <strong>-a</strong>) is provided, in which case <span class="argument">&#123;css&#125;</span> is
appended to its current value. If <span class="argument">&#123;css&#125;</span> is not provided, any styles matching
<span class="argument">&#123;group&#125;</span> are listed.</p></div>
<div class="attribution">
</div></div></div>
<div class="para"><p><span class="tag">:highlight-clear</span><br />
<div class="key">:hi[light] clear [<span class="argument">&#123;group&#125;</span>[<span class="argument">&#123;selector&#125;</span>]]</div><br /></p></div>
<div class="quoteblock">
<div class="content">
<div class="para"><p>Reset the highlighting for <span class="argument">&#123;group&#125;</span> to its default value. If
<span class="argument">&#123;group&#125;</span> is not given, reset all highlighting groups.</p></div>
<div class="attribution">
</div></div></div>
<div class="para"><p><span class="tag">:sty</span> <span class="tag">:style</span><br />
<div class="key">:sty[le]<span class="argument">&#91;!&#93;</span> [-name=<span class="argument">&#123;name&#125;</span>] [-append] <span class="argument">&#123;filter&#125;</span> [<span class="argument">&#123;css&#125;</span>]</div><br /></p></div>
<div class="quoteblock">
<div class="content">
<div class="para"><p>Add CSS styles to the browser or to web pages. <span class="argument">&#123;filter&#125;</span> is a comma
separated list of URLs to match. URLs ending with <strong>*</strong> are matched as
prefixes, URLs not containing any <strong>:</strong> or <strong>/</strong> characters are
matched as domains. If <span class="argument">&#123;name&#125;</span> (short option: <a class="command" href="#">-n</a>) is provided, any
existing style with the same name is overridden, and the style may later
be deleted using <span class="argument">&#123;name&#125;</span>. If <strong>-append</strong> (short option: <strong>-a</strong>) is provided
along with <strong>-name</strong>, <span class="argument">&#123;css&#125;</span> and <span class="argument">&#123;filter&#125;</span> are appended to its current
value.</p></div>
<div class="para"><p>If <span class="argument">&#123;css&#125;</span> isn't provided, matching styles are listed.</p></div>
<div class="attribution">
</div></div></div>
<div class="para"><p><span class="tag">:dels</span> <span class="tag">:delstyle</span><br />
<div class="key">:dels[tyle] [-name=<span class="argument">&#123;name&#125;</span>] [-index=<span class="argument">&#123;index&#125;</span>] [<span class="argument">&#123;filter&#125;</span>] [<span class="argument">&#123;css&#125;</span>]</div><br /></p></div>
<div class="quoteblock">
<div class="content">
<div class="para"><p>Delete any matching styles. If <span class="argument">&#123;filter&#125;</span> is provided, only matching elements of
the filter are disabled. For instance, a filter <a class="command" href="#">mozilla.org</a>, given a
style for <a class="command" href="">www.google.com,mozilla.org</a>, will result in a style for
<a class="command" href="">www.google.com</a>. The available options are:</p></div>
<div class="ilist"><ul>
<li>
<p>
<a class="command" href="">-name</a>:  The name provided to <a class="command" href="">:style</a> (short option:
                 <strong>-n</strong>)
</p>
</li>
<li>
<p>
<a class="command" href="">-index</a>: For unnamed styles, the index listed by <a class="command" href="">:style</a>
                 (short option: <strong>-i</strong>)
</p>
</li>
</ul></div>
<div class="attribution">
</div></div></div>
<div id="footer">
<div id="footer-text">
Last updated 2009-02-28 20:06:43 IST
</div>
</div>
</body>
</html>
